/***
1、文件上传
2、富文本框
*/
<template>
    <div style="text-align:left;">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="SPU信息" name="first">
                <el-form ref="form" :model="products" label-width="80px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="商品编码">
                                <el-input v-model="products.code"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="商品名称">
                                <el-input v-model="products.name"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="所属品牌">
                                <el-select v-model="products.brandId" placeholder="请选择活动区域">
                                    <el-option label="区域一" value="shanghai"></el-option>
                                    <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="所属分类">
                                <el-select v-model="products.categoyrId" placeholder="请选择活动区域">
                                    <el-option label="区域一" value="shanghai"></el-option>
                                    <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item label="立即上架">
                        <el-checkbox v-model="checked">是</el-checkbox>
                    </el-form-item>

                    <el-form-item label="商品介绍">
                        <!--富文本框-->
                        <quillEditor v-model="products.description" />
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="SKU信息" name="second">
                <div style="min-height:500px;">
                    <el-button size="mini" @click="eventAddSkuRow">添加sku</el-button>
                    <el-table :data="products.skus" style="width: 100%">
                        <el-table-column prop="date" label="SKU名称">
                            <template slot-scope="scope">
                                <input v-model="scope.row.name" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="SKU规格" width="420">
                            <template slot-scope="scope">
                                <input v-model="scope.row.spec" style="width:100%;" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="address" label="数量及价格" width="380">
                            <template slot-scope="scope">
                                <el-row>
                                    <el-col :span="8">数量：</el-col>
                                    <el-col :span="16"><input v-model="scope.row.stock" /></el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="8">进货价格：</el-col>
                                    <el-col :span="16"><input v-model="scope.row.inPrice" /></el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="8">市场价格：</el-col>
                                    <el-col :span="16"><input v-model="scope.row.marketPrice" /></el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="8">销售价格：</el-col>
                                    <el-col :span="16"><input v-model="scope.row.salePrice" /></el-col>
                                </el-row>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="图片" width="180">
                            <template slot-scope="scope">
                                <!--上传文件-->
                                <div>
                                    <el-upload class="upload-demo" :multiple="true" action="http://localhost:5164/file"
                                        :on-preview="handlePreview" :on-remove="handleRemove"
                                        :on-success="x => uploadSuccessHandle(x, scope.row.id)" :file-list="fileList"
                                        list-type="picture">
                                        <el-button size="mini" type="primary">上传</el-button>

                                    </el-upload>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
        </el-tabs>


        <div style="text-align:right;padding-right:50px">
            <el-button type="primary" @click="eventSubmitProduct">立 即 提 交</el-button>
        </div>


    </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import 'quill/dist/quill.core.css'

export default {
    components: {
        quillEditor
    },
    data() {
        return {
            fileList: [],
            activeName: 'first',
            checked: true,
            products: {
                "code": "",
                "brandId": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
                "categoyrId": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
                "cover": "string",
                "description": "string",
                "name": "string",
                "skus": [
                    {
                        "id": 0,
                        "name": "",
                        "inPrice": 0,
                        "marketPrice": 0,
                        "salePrice": 0,
                        "spec": "string",
                        "stock": 0,
                        "images": []
                    }
                ],
                "specs": [
                    {
                        "specName": "",
                        "specValues": []
                    }
                ]
            },
        };
    },
    methods: {
        //提交按钮事件
        eventSubmitProduct() {
            console.log(this.products);
            let url = "http://localhost:5164/product";
            this.$http.post(url,this.products).then(res => {
                console.log(res);
            })
        },
        //添加Sku表格行
        eventAddSkuRow() {
            let id = this.products.skus.length
            this.products.skus.push({ id: id, name: '', spec: '', stock: 0, inPrice: 0, marketPrice: 0, salePrice: 0, images: [] })
        },
        //文件上传功能的相关操作
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        //上传控件，上传成功后的处理
        uploadSuccessHandle(val, index) {
            console.log(val, index);
            //this.images.push(val[0])
            this.products.skus[index].images.push(val[0])
        },
        //tab标签页改变事件
        handleClick(tab, event) {
            console.log(tab, event);
        }
    },

    //监听属性
    watch: {
        images(oldValue, newValue) {
            console.log(oldValue, newValue);
        }
    }
}
</script>


<style>
.ql-container {
    height: 250px;
}

.el-upload-list li {
    float: left;
    width: 40px;
    height: 40px;
}
</style>